new Vue({
    //id="app"的区域 交给Vue托管
    el: "#app",
    data: {
        //user数据字段 将在findById中使用 将查询出来的单个User数据存储到此对象中:
        user: {id: "", age: "", username: "", password: "", email: "", sex: ""},
        //此数组对象 在findAll查询所有User数据后 存储:
        userList: []
    },
    methods: {
        //查询所有User数据:
        findAll: function () {
            //设置此字段 是为了访问vue定义的userList数组 因为进入axios后，就不能用this访问
            var _this = this;
            axios.get('/user/findAll') /*访问的路径*/
                .then(function (response) {
                    //使用 response.data 接收 /user/findAll 发送的数据 使用 _this.userList接收
                    _this.userList = response.data;
                    console.log(_this.userList);
                })
                .catch(function (err) {
                    console.log(err);
                });
        },
        //根据 User的Id 查询 单个 User数据:
        findById: function (userId) {
            //设置此字段 是为了访问vue定义的userList数组 因为进入axios后，就不能用this访问
            var _this = this;
            axios.get('/user/findByUserId/' + userId) /*访问的路径 使用PathVariable 直接在后面拼接id即可*/
                .then(function (response) {
                    //使用 response.data 接收 /findByUserId/{id} 发送的数据 使用 _this.user接收
                    _this.user = response.data;
                    //使用JQuery进行id绑定，并使用modal进行页面显示
                    $("#myModal").modal("show");
                    console.log(response.data);
                })
                .catch(function (err) {
                    console.log(err);
                });
        },
        //更新数据，将数据更新完成后，在调用findAll查询所有user的方法
        update: function () {
            ////设置此字段 是为了访问findAll方法 因为进入axios后，就不能用this访问
            var _this = this;
            //因为表单提交，在java后台使用了@requestBody 所有必须用post请求:
            axios.post('/user/updateUser', _this.user)/*后面的参数可简写，将user数据放入即可*/
                .then(function (res) {
                    //更新数据以后，再调用findAll方法:
                    _this.findAll();
                    console.log(res);
                })
                .catch(function (err) {
                    console.log(err);
                });
        }
    },
    //当我们页面加载的时候触发请求，查询所有
    created: function () {
        this.findAll();
    }
});